<template>
  <div class="box">
    <div class="content">
      <div v-for="item, index in list" :key="index">
        <div class="robot" v-show="item.type === 0">
          <img class="logoImg" src="@/assets/logo-blue.png" alt="logo" />
          <div class="robotText">{{ item.text }}</div>
        </div>
        <div 
          class="robot" 
          v-show="item.type === 1" 
          :style="{backgroundColor: item.type === 1 ? '#eeebeb' : ''}">
          <div class="iconPeople el-icon-s-custom"></div>
          <div class="robotText"><span>{{ item.text }}</span></div>
        </div>
      </div>
    </div>
    <div class="inputBox">
      <el-input placeholder="请输入内容" v-model="keyword" @keyup.enter.native="handleSend">
        <el-button 
          slot="append" 
          icon="el-icon-search" 
          @click="handleSend"
        >发送</el-button>
      </el-input>
    </div>
  </div>
</template>
<script>
import { gptQuestion } from '@/api/table'
export default {
  data() {
    return {
      list: [],
      keyword: ''
    }
  },
  methods: {
    async handleSend() {
      this.list.push({
        type: 1,
        text: this.keyword
      })
      const str = this.keyword
      this.keyword = ''
      try {
        const { data } = await gptQuestion(str)
        this.list.push({
          type: 0,
          text: data.choices[0].text
        })
        // const aa = data.choices[0].text.replace(/\n/g, '< br/>')
        // console.log(aa, data.choices[0], '信息');
      } catch(err) {
        return console.log(err);
      }
    }
  },
  watch: {
    list: {
      handler(value) {
        this.$nextTick(() => {
          const div = document.getElementsByClassName('content')[0];
          div.scrollTop = div.scrollHeight
        })
      },
      immediate: true
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  height: 90vh;
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .content {
    overflow-y: auto;
    height: 400px;
    flex: 7;
  .inputBox {
    flex: 1;
    position: sticky;
    // bottom: 40px;
    margin: 20px 0;
  }
  .robot {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 20px 0;
    border-top: 0.2px solid #d4d4d4;
    border-bottom: 0.2px solid #d4d4d4;
    
  }
  // .people {
  //   width: 100%;
  //   height: 100%;
  //   display: flex;
  //   align-items: center;
  //   justify-content: flex-end;
  //   padding: 20px 0;
  //   background-color: #eeebeb;
  //   border-top: 0.2px solid #d4d4d4;
  //   border-bottom: 0.2px solid #d4d4d4;
  // }
  .logoImg {
    width: 40px;
    height: 30px;
    margin: 10px;
  }
  .iconPeople {
    font-size: 30px;
    margin: 10px;
  }
  .robotText {
    width: 100%;
    height: 100%;
    font-size: 16px;
    color: #3e3e3e;
    max-width: 80%;
  }
}
}
</style>